import Taro, { Component } from "@tarojs/taro";
import {Swiper,SwiperItem,Image,View,Text,Input,} from "@tarojs/components";
import "../../assets/common.scss";
import CommonJs from "../../utils/common";
import Hearder from "./hearder";
import "./join.scss";

export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      result: [],
      nowstep: "",
      isloading:0,
      appmark:CommonJs.getmark(),
    };
  }
  config = {
    navigationBarTitleText: "我要加入",
  };
  open(url,type) {
    this.$preload({
		  type:type,
	    })
    CommonJs.openTo(url);
  }
  componentWillMount() {
    this.getjmname();
    this.shopType();
  }
  componentDidShow() {}
  shopType() {
    var _this = this;
    var date1 = {};
    CommonJs.ajaxRequest("/profit/papi/v1.9/grade-type-setting/type/list", date1,"GET",function(res) {
        var ret = res.data;
        var result = _this.state.result;
        for (var i = 0; i < ret.length; i++) {
          result.push(ret[i]);
        }
        _this.setState({
          result: result,
        });
      },
      "wfw"
    );
  }
  getjmname() {
    Taro.showToast({
      title: "加载中",
      icon: "none",
      duration: 1000,
    });
    var _this = this;
    CommonJs.ajaxRequest("/gradeSetting/getBoodGradeParam", "", "GET", function(res) {
      _this.setState({
        nowstep: res.content,
        isloading:1
      });
    });
  }

  jmType(type,name) {
    var _this = this
    var jmlist = this.state.nowstep;	
    _this.$preload({
      name:name,
    })
		if(this.state.isloading==0){
			Taro.showToast({
			  title:'数据还在加载中，稍后再试试',
			  icon: 'none',
			  duration: 2000 
			})
			return false;
		}
    if (jmlist == null) {
      var url = "/pages/join/shoptype?type=" + type+'&byfrom=join';
      CommonJs.open(url); 
    } else  {
		var status = jmlist.status
      if(status == 2){
		if (jmlist.gradeSettingId < type) {
			var amount = jmlist.boodGradeUpgradeList;
			// console.log(JSON.stringify(amount)+'66666');
				for (var i = 0; i < amount.length; i++) {
					if (amount[i].gradeSettingId == type) {
            var payAmount = amount[i].payAmount;
					  Taro.showModal({
						title:'提示',
            content:"升级" +amount[i].gradeSettingName +"需要支付" +payAmount +"元开户费",
            success:function(res){
              if(res.confirm){
              var url ="/pages/join/pay?monery=" + payAmount + "&byfrom=jmjoin&jmtype=" +type;
              CommonJs.open(url);
                  }
               }
					    });
					  
					 }
				  }
		  } else {
			// console.log(type+'66666');
			Taro.showModal({
			  title: "提示",
			  content: "您已经是" + jmlist.gradeSettingName,
			  success: function(res) {},
			  showCancel: false,
			});
		  }
	   } else{		  
			var url = "/pages/join/shoptype?type=" + type+'&byfrom=join';
      		CommonJs.open(url);
	   }
    }
  }  
  bdfun(url,id){
  	var _this=this;
		CommonJs.ajaxRequest('/bond/getUserBondGradeSetting','','GET',function(res){
			if(res.content&&res.content.gradeSettingId>1){
				CommonJs.open(url);
			}
			else{
				var str=_this.state.appmark=='xjzb'?'易庄才能进行绑定':'区域运营中心/街道合伙人才能进行绑定';
				Taro.showModal({
				  title: "提示",
				  content:str,
				  success: function(res) {},
				  showCancel: false,
				});
			}
	  })
  }
  render() {
    const shoplist = this.state.result;
    const appmark = this.state.appmark;
    return (
      <View className="page"> 
		  <View className='qy-top' onClick={this.open.bind(this,'/pages/my/bigcharge')}>无法支付大额支付，请点击查看</View>
        <View className="qy-list">
          {shoplist.map((item, index) => (
            <View className={"shop-type" + index} >
              <View className="ys-li">
				<Text className="setqy" onClick={this.bdfun.bind(this,'/pages/my/region?byfrom=join&gradeSettingId='+item.gradeSettingId,item.gradeSettingId)} style={index==2?'':'display:none'}>设置管辖区域</Text>
				<Text className="setqy" onClick={this.bdfun.bind(this,'/pages/my/region?byfrom=join&type=sq&gradeSettingId='+item.gradeSettingId,item.gradeSettingId)} style={index==1&&appmark!='xjzb'?'':'display:none'}>设置管辖商圈</Text>
				{item.gradeSetting.name}
			  </View>
              <View className="ys-list">
                <View className="ys-top">
                  <Text className="ys-l" style={appmark=='xjzb'?'':'display:none'}>配赠WUC:</Text>
                  <Text className="ys-l" style={appmark=='xjzb'?'display:none':''}>配赠收益金:</Text>
                  <Text className="ys-value">{appmark=='xjzb'?item.balanceWuc / 100:item.balanceUc / 100}</Text>
                </View>
                <View className="ys-box">
                  <Text className="ys-l" style={appmark=='xjzb'?'':'display:none'}>专项资产:</Text>
                  <Text className="ys-l" style={appmark=='xjzb'?'display:none':''}>成长贡献:</Text>
                  <Text className="ys-value">{item.balanceZxzc / 100}</Text>
                </View>
                <View className="ys-box" style={appmark=='xjzb'?'':'display:none'}>
                  <Text className="ys-l">授信额度:</Text>
                  <Text className="ys-value">{item.balanceCreditUc / 100}</Text>
                </View>
                <View className="ys-detail">
                  <View className="ys-boxs">
                    <Text className="ys-l">开通金额:</Text>
                    <Text className="ys-value">{item.amount / 100}</Text>
                  </View>

                  <View className="ys-btn">
                  <Button className="qybtn" onClick={this.open.bind(this,'/pages/join/qydetail',item.gradeSettingId)}>
                      了解详情
                    </Button>
                    <Button className="ysbtn" onClick={this.jmType.bind(this, item.gradeSettingId,item.gradeSetting.name)}>
                      开通{item.gradeSetting.name}
                    </Button>
                  </View>
                </View>
              </View>
            </View>
          ))}
        </View>
      </View>
    );
  }
}
